<template>
    <div>
        <Shortcut></Shortcut>
        <div class="profile">
            <div class="header">
                <div class="title clearfix">
                    <div class="logo fl">
                        <Logo></Logo>
                    </div>
                    <div class="shop-name fl">极客商城</div>
                    <div class="name fl">个人中心</div>
                    <div class="cart fr">
                        <ShopCart></ShopCart>
                    </div>
                </div>
            </div>
            <div class="main clearfix">
                <div class="content">
                    <div class="left-menu fl">
                        <div
                            class="basic"
                            :class="activeIndex == 1 ? 'active-menu' : false"
                            @click="changeCompoent(1)"
                        >
                            基本信息
                        </div>
                        <div
                            class="address"
                            :class="activeIndex == 2 ? 'active-menu' : false"
                            @click="changeCompoent(2)"
                        >
                            地址管理
                        </div>
                        <div
                            class="order"
                            :class="activeIndex == 3 ? 'active-menu' : false"
                            @click="changeCompoent(3)"
                        >
                            我的订单
                        </div>
                        <div
                            class="security"
                            :class="activeIndex == 4 ? 'active-menu' : false"
                            @click="changeCompoent(4)"
                        >
                            安全设置
                        </div>
                    </div>
                    <div class="right-content fl">
                        <component :is="activeCompoentName"></component>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Shortcut from "@/components/common/Shortcut";
import Logo from "@/components/common/Logo";
import ShopCart from "@/components/index/ShopCart";
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import BasicInfo from '@/components/Profile/BasicInfo';
import AddressManager from '@/components/Profile/AddressManager';
import MyOrder from '@/components/Profile/MyOrder';
import SecuritySettings from '@/components/Profile/SecuritySettings';

export default {
    name: "Profile",
    setup() {
        const router = useRouter();
        const route = useRoute();
        let activeCompoentName = ref("BasicInfo");
        let activeIndex = ref(1);
        let activeComponent = ref([
            { index: 1, componentName: 'BasicInfo' },
            { index: 2, componentName: 'AddressManager' },
            { index: 3, componentName: 'MyOrder' },
            { index: 4, componentName: 'SecuritySettings' },
        ])

        const changeCompoent = (index) => {
            activeIndex.value = index;
            activeComponent.value.forEach((element) => {
                if (element.index == activeIndex.value) {
                    activeCompoentName.value = element.componentName;
                }
            })
            router.push("profile?activeIndex=" + index)
        }

        onMounted(() => {
            activeIndex.value = route.query.activeIndex;
            activeComponent.value.forEach((element) => {
                if (element.index == activeIndex.value) {
                    activeCompoentName.value = element.componentName;
                }
            })
        })
        return {
            activeCompoentName,
            activeIndex,
            activeComponent,
            changeCompoent,
        }
    },
    components: {
        BasicInfo,
        AddressManager,
        MyOrder,
        SecuritySettings,
        Shortcut,
        Logo,
        ShopCart
    }
}
</script>

<style lang="less" scoped>
.profile {
    .header {
        // background: linear-gradient(
        //     to right,
        //     #f4d590,
        //     #bcfefe,
        //     #baf4b3,
        //     #f28583
        // );
        border-bottom: 3px solid #c0a6ff;
        height: 130px;
        line-height: 120px;
    }
    .title {
        width: var(--content-width);
        margin: 0 auto;
        height: 80px;
        line-height: 80px;
        .logo {
            height: 40px;
        }
        .shop-name {
            font-size: 30px;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: 30px;
            font-weight: 700;
            color: #c0a6ff;
        }
        .name {
            font-size: 20px;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: 30px;
        }
        .cart {
            padding-right: 180px;
        }
    }
    > .main {
        background: linear-gradient(to right, #eee6f6, #fce6f3);
        .content {
            width: var(--content-width);
            margin: 0 auto;
            .left-menu {
                height: 800px;
                margin-top: 20px;
                color: #333;
                font-size: 14px;
                div {
                    margin-top: 30px;
                    // border-bottom: 1px solid #f4f4f4;
                    &:hover {
                        cursor: pointer;
                        color: #f86a3f;
                        // border-bottom: 1px solid #f86a3f;
                    }
                }
                .active-menu {
                    color: #f86a3f;
                }
            }
            .right-content {
                margin-top: 50px;
                margin-left: 60px;
                background-color: #fff;
            }
        }
    }
}
</style>